<template>
  <div class="pk-form">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" :label-width="labelWidth" :label-position="labelPosition" class="pk-ruleForm" size="default" v-if="show" autocomplete="off">
      <el-row>
        <el-col :span="item.span || 24" v-for="(item, index) in formConfig" :key="index" >
          <el-form-item :label="item.label" :prop="item.prop" v-if="item.show == false ? false: true"> 
            <template v-if="item.type =='input'" > 
              <el-input v-model="ruleForm[item.prop]" :type="item.subtype || 'text'" :id="'input-' + Math.random()" auto-complete="new-password" :show-password="item.showPassword==true ? true: false" :placeholder="item.placeholder || getplaceholder(item)" clearable/>
            </template>
            <template v-if="item.type =='select'" >
              <el-select v-model="ruleForm[item.prop]" :placeholder="item.placeholder || getplaceholder(item)" clearable style="min-width: 200px;">
                <el-option
                  v-for="a in item.options"
                  :key="a.value"
                  :label="a.label"
                  :value="a.value"
                />
              </el-select> 
            </template>
            <template v-if="item.type =='radio'" >
              <el-radio-group v-model="ruleForm[item.prop]">
                <el-radio :value="a.value" v-for="(a, index) in item.options" :key="index">{{ a.label }}</el-radio>
              </el-radio-group>
            </template> 
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineExpose } from 'vue'
const props = defineProps({
  labelWidth: {
    type: String,
    default: '100px'
  },
  formConfig: {
    type: Array,
    default: () => []
  },
  gutter: {
    type: [Number, String],
    default: 30
  },
  labelPosition: {
    type: String,
    default: 'left'
  }
})
const ruleFormRef = ref(null)
const ruleForm = ref({})
const rules = ref({})
const show = ref(false)

const getplaceholder = (e) => {
  const data = {
    'input': '请输入',
    'select': '请选择'
  } 
  return data[e.type] + e.label
} 

const setFormProp = (prop, data) => {
  console.log('------------setFormProp---------------------')
  ruleForm.value[prop] = data
}
const setFormItem = (e) => {
  if (e.type == 'input' || e.type == 'radio') {
    ruleForm.value[e.prop] = e.value || '' 
  }
}


const setRules = (e) => {
  if (e.type == 'input') {
    rules.value[e.prop] = [{ required: e.required == false ? false : true , message: e.label + '不能为空', trigger: 'blur' }]
  } 
}

const getInit = () => {
  props.formConfig.forEach(item => {
    setFormItem(item)
    setRules(item)
  })

  setTimeout(() => {
    show.value = true
  }, 100)
}

const submitForm = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        resolve(ruleForm.value)
      } else {
        reject()
      }
    });
  })
}

defineExpose({
  ruleFormRef,
  ruleForm,
  submitForm,
  setFormProp
})

onMounted(() => {
  getInit()
})
</script>

<style lang="scss" scoped>

</style>